<template>
  <div class="flex">
    <div style="margin: 0 10px" v-for="(item, index) in userList" :key="index">
      {{ item }}
    </div>
  </div>
  <el-row :gutter="20">
    <el-col :span="12">
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ 'border-bottom': 'none' }"
        :header-row-style="{ height: '60px' }"
        :cell-style="{ height: '60px', 'border-bottom': 'none' }"
        stripe
      >
        <el-table-column prop="name" label="省市" />
        <el-table-column prop="name" label="关注" />
        <el-table-column prop="name" label="填报" />
      </el-table>
    </el-col>
    <el-col :span="12">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="院校" />
        <el-table-column prop="name" label="填报" />
      </el-table>
    </el-col>
    <el-col :span="12">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="专业类" />
        <el-table-column prop="name" label="类型" />
        <el-table-column prop="name" label="关注" />
        <el-table-column prop="name" label="填报" />
      </el-table>
    </el-col>
    <el-col :span="12">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="专业类" />
        <el-table-column prop="name" label="类型" />
        <el-table-column prop="name" label="填报" />
      </el-table>
    </el-col>
  </el-row>
</template>
<script setup>
const userList = ref(['全部', '专家', '用户']);
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
  },
];
</script>
